<template>
	<view style="background-color: #EFEFEF;">
		<uni-nav-bar :border="false" :fixed="true" :statusBar="true" @click-right="openSettingAction" backgroundColor="#EFEFEF">
			<view class="flex align-center justify-center font-weight-bold w-100">
				<view class="mx-1" @click="changeTab(index)" v-for="(item,index) in tabBars" :key="index" :class="tabIndex === index ? 'font-lg text-black' : 'font-md text-light-muted'">
					{{item.name}}
				</view>
			</view>
			<text slot="left" class="iconfont iconsousuo ml-2" style="font-size: 48rpx;"></text>
			<text slot="right" class="iconfont iconfilter2-fill" style="font-size: 48rpx;"></text>
		</uni-nav-bar>
		<!-- #ifndef MP-ALIPAY -->
		<swiper class="card-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
		 :autoplay="true" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
		 indicator-active-color="#0081ff" :style="'height:'+swiperH+'px;'">
			<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'" :style="'height:'+imageH+'px;'"></image>
					<view class="flex flex-column flex-1 align-center">
						<view class="flex align-center mt-2">
							<text class="font-md text-black font-weight-bold mr-2">张静初</text>
						</view>
						<view class="flex align-center">
							<text class="font text-orange font-weight-bold mr-2 mt-1">4.95</text>
							<!-- 禁用状态 -->
							<uni-rate :size="16" :disabled="true" disabledColor="#74BC34" :value="4.5" />

						</view>
						<view class="flex flex-wrap">
							<view class="border rounded32 text-lightbule font-sm mx-2 my-1 px-2" 
							v-for="(item2,index2) in setlist" :key="index2">{{item2.name}}</view>
						</view>
						<text class="font-sm text-dark mt-1">江苏·苏州</text>
						<button type="primary" class="iconfont iconshipintonghua mini-button" style="font-size: 48rpx;"></button>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		data() {
			return {
				cardCur: 0,
				swiperH: 1080,
				imageH: 720,
				tabIndex: 0,
				tabBars: [{
					name: "推荐"
				}, {
					name: "匹配"
				}],
				setlist: [{
					name: "情感纠纷"
				}, {
					name: "经济合同"
				},{
					name: "情感纠纷"
				}],
				swiperList: [{
					id: 0,
					type: 'image',
					url: 'https://img.xiaopiu.com/userImages/img9159694579f0.jpeg'
				}, {
					id: 1,
					type: 'image',
					url: 'https://img.xiaopiu.com/userImages/img315969455ab0.jpg',
				}, {
					id: 2,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
				}, {
					id: 3,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg'
				}, {
					id: 4,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big25011.jpg'
				}, {
					id: 5,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big21016.jpg'
				}, {
					id: 6,
					type: 'image',
					url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big99008.jpg'
				}],
				dotStyle: false,
				towerStart: 0,
				direction: ''
			};
		},
		onLoad() {
			uni.getSystemInfo({
				success: res => {
					this.swiperH = res.windowHeight- uni.upx2px(120);
					this.imageH = res.windowHeight - uni.upx2px(640);
				},
			});
			this.TowerSwiper('swiperList');
			// 初始化towerSwiper 传已有的数组名即可
		},
		methods: {
			// 打开发布页
			openSettingAction() {
				uni.navigateTo({

				});
			},
			// 切换选项卡
			changeTab(index) {
				this.tabIndex = index
			},
			DotStyle(e) {
				this.dotStyle = e.detail.value
			},
			// cardSwiper
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			// towerSwiper
			// 初始化towerSwiper
			TowerSwiper(name) {
				let list = this[name];
				for (let i = 0; i < list.length; i++) {
					list[i].zIndex = parseInt(list.length / 2) + 1 - Math.abs(i - parseInt(list.length / 2))
					list[i].mLeft = i - parseInt(list.length / 2)
				}
				this.swiperList = list
			},

			// towerSwiper触摸开始
			TowerStart(e) {
				this.towerStart = e.touches[0].pageX
			},

			// towerSwiper计算方向
			TowerMove(e) {
				this.direction = e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left'
			},
		}
	}
</script>

<style>
	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
